<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='mapbox-gl.css' rel='stylesheet'/>
    <script type="text/javascript" src="cordova.js"></script>
    <!--script src='http://172.27.203.11:8080/www/mapbox-gl-cordova-offline-dev.js'></script-->
    <script src='mapbox-gl-cordova-offline.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    'cordova' in window ? document.addEventListener('deviceready', init, false) : init()

    function init () {
        new mapboxgl.OfflineMap({
            container: 'map',
            style: 'styles/osm-bright/style-offline.json',
            center: [
                2.15,
                41.38
            ],
            zoom: 12,
            bearing: -45,
            hash: true
        }).then(function (map) {
            map.addControl(new mapboxgl.NavigationControl())
        })
    }
</script>

<!-- Code needed for live-reload when debugging -->
<!--script type="text/javascript">
	const IP_ADDRESS_AND_PORT = "172.27.203.11:8080";
	if ('WebSocket' in window) {
		(function() {
			function refreshCSS() {
				const sheets = [].slice.call(document.getElementsByTagName("link"));
				const head = document.getElementsByTagName("head")[0];
				for (let i = 0; i < sheets.length; ++i) {
					const elem = sheets[i];
					head.removeChild(elem);
					const rel = elem.rel;
					if (elem.href && typeof rel !== "string" || rel.length === 0 || rel.toLowerCase() === "stylesheet") {
						const url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChild(elem);
				}
			}
			const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
			const address = protocol + IP_ADDRESS_AND_PORT + '/ws';
			const socket = new WebSocket(address);
			socket.onmessage = function(msg) {
				if (msg.data === 'reload') window.location.reload();
				else if (msg.data === 'refreshcss') refreshCSS();
			};
			console.log('Live reload enabled.');
		})();
	}
</script-->

</body>
</html>
